<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
</head>
<body>
    <canvas id="canvas" width="375" height="250"></canvas>
    <canvas id="list1"></canvas>
    <canvas id="list2"></canvas>
    <canvas id="list3"></canvas>
</body>
<style>
    *{
        margin: 0;
        padding: 0;
    }
</style>
</html>

<script>
    let bg = new Image()
    let goods = {
        1:  new Image(),
        2:  new Image(),
        3:  new Image(),
        4:  new Image(),
        5:  new Image()
    }
    let topMove = 0
    let bgCanvas, bgCtx;
    function drawBg () {
        bgCanvas =  document.getElementById('canvas');
        bgCtx = bgCanvas.getContext('2d');
        bg.src = './img/lotteryBody.png'
        bg.onload = () => {
            bgCtx.drawImage(bg, 0, 0, bgCanvas.width, bgCanvas.height)
        }
        drawImgItem()
    }
    drawBg()

    function drawImgItem () {
        let list1 = document.getElementById('list1');
        let list1Ctx = list1.getContext('2d')
        list1.width = bgCanvas.width / 3
        list1.height = bgCanvas.height

        for (let i = 0; i< 5; i++) {
            // [`goods${i + 1}`]
            goods[i+1].src =  `./img/goods${i+1}.png`
            goods[i+1].onload = () => {
                list1Ctx.drawImage(goods[i+1], 20 + 100 * i, 20 + 100 * i, 100, 100)
            }
        }
        goodsContainerMove()
    }
    function goodsContainerMove () {
        let list1 = document.getElementById('list1');
        let list1Ctx = list1.getContext('2d')
        list1Ctx.translate(0, topMove);
        topMove --
        console.log('%c [ topMove ]-65', 'font-size:13px; background:pink; color:#bf2c9f;', topMove)

        // requestAnimationFrame(goodsContainerMove)
    }
</script>